<template>
    <nav class="navbar navbar-expand-sm navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">记账簿</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
                aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul id="login-logined" class="navbar-nav ms-auto">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLinkRight" role="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            {{ username }}
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLinkRight">
                            <li><a class="dropdown-item" @click="$router.push('/password')">修改密码</a></li>
                            <hr class="dropdown-divider">
                            <li><a class="dropdown-item" @click="logout()" href="#">登出</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</template>

<script>
    export default {
        name: 'Headers',
        data() {
            return {
                username: ''
            }
        },
        methods: {
            toLogin() {
                this.$router.replace('/login')
            },
            toRegister() {
                this.$router.replace('/register')
            },
            logout() {
                this.$cookies.remove('username')
                this.$cookies.remove('authToken')
                this.$router.replace('login')
            }
        },
        mounted() {
            this.username = this.$cookies.get('username');
        }
    }
</script>

<style scoped></style>